<div id="content">

  <!-- Bread crumb is created dynamically -->
  <!-- row -->
  <div class="row">

    <!-- col -->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <h1 class="page-title txt-color-blueDark text-center well">

        <!-- PAGE HEADER -->
        SmartAdmin Layout Options<br>
        <small class="text-success">Morph SmartAdmin to your need! The layout of SmartAdmin is extreamly flexible</small>
      </h1>

    </div>
    <!-- end col -->

  </div>
  <!-- end row -->

  <!--
      The ID "widget-grid" will start to initialize all widgets below
      You do not need to use widgets if you dont want to. Simply remove
      the <section></section> and you can use wells or panels instead
      -->

  <!-- widget grid -->
  <section id="widget-grid" class="">

    <!-- row -->

    <div class="row">

      <!-- a blank row to get started -->
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Layout type "<strong>Navigation Minified</strong>" <br>
            <small>
              Add the following class(s) to body tag
              <code>.minified</code>
            </small>
          </h5>
          <h5>
            <small>
              <i>
                Avalible options
              </i>
            </small>
          </h5>
          <span class="label label-default">.fixed-navigation</span>
          <span class="label label-default">.container</span>
          <span class="label label-default">.fixed-page-footer</span>
          <span class="label label-default">.fixed-header</span>
          <span class="label label-default">.fixed-ribbon</span>
          <span class="label label-default">.smart-rtl</span>
          <br>
          <br>

          <img src="assets/img/demo/layout-skins/layout-collapse.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Layout type "<strong>Hidden Navigation</strong>" <br>
            <small>Add the following class(s) to body tag <code>.hidden-menu</code></small>
          </h5>
          <h5>
            <small>
              <i>
                Avalible options
              </i>
            </small>
          </h5>
          <span class="label label-default">.fixed-navigation</span>
          <span class="label label-default">.container</span>
          <span class="label label-default">.fixed-page-footer</span>
          <span class="label label-default">.fixed-header</span>
          <span class="label label-default">.fixed-ribbon</span>
          <span class="label label-default">.smart-rtl</span>
          <br>
          <br>
          <img src="assets/img/demo/layout-skins/layout-hidden.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>

    </div>
    <div class="row">

      <!-- a blank row to get started -->
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Layout type "<strong>Menu on Top with center content</strong>" <br>
            <small>Add the following class(s) to body tag <code>.top-navigation .container</code></small>
          </h5>
          <h5>
            <small>
              <i>
                Avalible options
              </i>
            </small>
          </h5>
          <span class="label label-default">.fixed-navigation</span>
          <span class="label label-default">.fixed-page-footer</span>
          <span class="label label-default">.fixed-header</span>
          <span class="label label-default">.fixed-ribbon</span>
          <span class="label label-default">.smart-rtl</span>
          <br>
          <br>
          <img src="assets/img/demo/layout-skins/layout-menutop.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Layout type "<strong>Center content with minified nav</strong>" <br>
            <small>Add the following class(s) to body tag <code>.minified .container</code></small>
          </h5>
          <h5>
            <small>
              <i>
                Avalible options
              </i>
            </small>
          </h5>
          <span class="label label-default">.top-navigation</span>
          <span class="label label-default">.fixed-navigation</span>
          <span class="label label-default">.fixed-page-footer</span>
          <span class="label label-default">.fixed-header</span>
          <span class="label label-default">.fixed-ribbon</span>
          <span class="label label-default">.smart-rtl</span>
          <br>
          <br>
          <img src="assets/img/demo/layout-skins/layout-collapse-minified.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>

    </div>
    <div class="row">

      <!-- a blank row to get started -->
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Layout type "<strong>RTL Layout</strong>" <br>
            <small>Add the following class(s) to body tag <code>.smart-rtl</code></small>
          </h5>
          <h5>
            <small>
              <i>
                Avalible options
              </i>
            </small>
          </h5>
          <span class="label label-default">.container</span>
          <span class="label label-default">.hidden-menu</span>
          <span class="label label-default">.fixed-page-footer</span>
          <span class="label label-default">.fixed-header</span>
          <span class="label label-default">.fixed-ribbon</span>
          <span class="label label-default">.minified</span>
          <br>
          <br>
          <img src="assets/img/demo/layout-skins/layout-rtl.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>
      <div class="col-sm-6">
        <!-- your contents here -->
        <div class="well text-center">
          <h5>
            Layout type "<strong>RTL with Menu on Top</strong>" <br>
            <small>Add the following class(s) to body tag <code>.smart-rtl .top-navigation</code></small>
          </h5>
          <h5>
            <small>
              <i>
                Avalible options
              </i>
            </small>
          </h5>
          <span class="label label-default">.fixed-navigation</span>
          <span class="label label-default">.container</span>
          <span class="label label-default">.fixed-page-footer</span>
          <span class="label label-default">.fixed-header</span>
          <span class="label label-default">.fixed-ribbon</span>
          <br>
          <br>
          <img src="assets/img/demo/layout-skins/layout-rtl-menutop.png" class="img-responsive center-block" style="box-shadow: 0px 0px 3px 0px #919191;">
        </div>
      </div>

    </div>
    <!-- end row -->

  </section>
  <!-- end widget grid -->


</div>
